<template>
        <form method="post"  >
                
                <table border="2" width="70%" style="border-collapse: collapse;overflow-y:auto;height:100%;font-size:20px;margin: auto;">
                <tr align="center" width="100%">
                <td colspan="2">
                    标签设置
                </td>
                </tr>
                <tr>
                <td align="center" width="20%">序号</td>
                <td width="80%"  ><input type="text" style="width: 100%; height: 100%;border-radius: 6px;border:1px solid gray" v-model="information.serialNumber" ></td>
                </tr>
                <tr>
                <td align="center" width="20%">标签名称</td>
                <td width="80%" ><input type="text" style="width: 100%; height: 100%;border-radius: 6px;border:1px solid gray" v-model="information.labelName" ></td>
                </tr>
                <tr>
                <td align="center" width="20%">首页标签</td>
                <td width="80%"  >
                是<input  type="radio" value="1" v-model="information.headLabel"/>
                否<input  type="radio" value="0" v-model="information.headLabel"/>
                </td>
                </tr>
                <tr>
                <td align="center" colspan="2">
                <el-button type="primary" @click="saveOrUpdate">保存</el-button>
                <el-button type="primary" @click="shutdown">关闭</el-button>
                </td>
                </tr>
            </table>
            
        </form>
</template>

<script>

export default {
    data() {
        return{
            information:{
            labelName:'',
            numbering:'',
            headLabel: ''
            }
            }
    },
    created(){
        this.init()
    },
    watch: {  //监听
    $route(to, from) { //路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
    methods: {
        init() {
      //判断路径有id值,做修改
      if(this.$route.query && this.$route.query.id) {
          //从路径获取id值
          const id = this.$route.query.id
          //调用根据id查询的方法
          this.getInfo(id)
         } else { //路径没有id值，做添加
            //清空表单
            this.information = {}
         }
        },
        saveOrUpdate() {
      //判断修改还是添加
      //根据teacher是否有id
      if(!this.information.id) {
        //添加
        this.onSubmit()
      } else {
          alert('sss')
        //修改
        this.update()
      }
        },
        onSubmit() {
            label.save(this.information)
            .then(Response => {
                this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
            })
        },
        tonew(){
        this.information = {}
        },
        shutdown(){
            window.close()
        },
        getInfo(id) {
            label.openInfo(id)         
            .then(response => {
                this.information = response.data
            })
        },
        update(){
            label.updateInfo(this.$route.query.id,this.information)
            .then(response =>{
                this.$message({
                type: 'success',
                message: '修改成功!'
          });
        })
        }

    },
    
    

}
</script>